import React from "react";

import createEngine, {
  DefaultLinkModel,
  DefaultNodeModel,
  DiagramModel,
} from "@projectstorm/react-diagrams";
import { CanvasWidget } from "@projectstorm/react-canvas-core";
import "./App.css";

function App() {
  //1) setup the diagram engine
  var engine = createEngine();

  //2) setup the diagram model
  var model = new DiagramModel();

  //3-A) create a default node
  var node1 = new DefaultNodeModel({
    name: "流程1",
    color: "rgb(0,192,255)",
  });
  node1.setPosition(100, 100);
  let port1 = node1.addOutPort("引出点");




  

  //3-B) create another default node
  var node2 = new DefaultNodeModel("流程2", "rgb(192,255,0)");
  let port2 = node2.addInPort("引入点");
  node2.setPosition(400, 100);

  // link the ports
  let link1 = port1.link<DefaultLinkModel>(port2);
  link1.getOptions().testName = "Test";
  link1.addLabel("你猜猜完成工作要几天？");

  //4) add the models to the root graph
  model.addAll(node1, node2, link1);

  //5) load model into engine
  engine.setModel(model);
  return <CanvasWidget engine={engine} className="canvas" />;
}

export default App;